/**
 * 组件样式库
 * 提供常用的UI组件样式
 */

@import './variables.scss';

/* ====== 按钮组件 ====== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-sm $spacing-lg;
  border: none;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  font-weight: 500;
  text-align: center;
  cursor: pointer;
  transition: $transition-base;
  box-sizing: border-box;
  
  &:active {
    transform: translateY(1rpx);
  }
}

.btn-primary {
  background: $primary-gradient;
  color: $text-white;
  box-shadow: $shadow-sm;
  
  &:hover {
    box-shadow: $shadow-base;
  }
  
  &:active {
    background: $primary-dark;
  }
}

.btn-secondary {
  background-color: $white;
  color: $primary-color;
  border: 2rpx solid $primary-color;
  
  &:hover {
    background-color: $primary-color;
    color: $white;
  }
}

.btn-success {
  background-color: $success-color;
  color: $text-white;
  
  &:active {
    background-color: darken($success-color, 10%);
  }
}

.btn-warning {
  background-color: $warning-color;
  color: $text-white;
  
  &:active {
    background-color: darken($warning-color, 10%);
  }
}

.btn-error {
  background-color: $error-color;
  color: $text-white;
  
  &:active {
    background-color: darken($error-color, 10%);
  }
}

.btn-lg {
  padding: $spacing-md $spacing-xl;
  font-size: $font-size-lg;
  border-radius: $border-radius-lg;
}

.btn-sm {
  padding: $spacing-xs $spacing-md;
  font-size: $font-size-sm;
  border-radius: $border-radius-sm;
}

.btn-block {
  width: 100%;
}

.btn-round {
  border-radius: 50rpx;
}

/* ====== 卡片组件 ====== */
.card {
  background-color: $white;
  border-radius: $border-radius-lg;
  box-shadow: $shadow-sm;
  overflow: hidden;
  transition: $transition-base;
  
  &:hover {
    box-shadow: $shadow-base;
  }
}

.card-header {
  padding: $spacing-lg;
  border-bottom: 1rpx solid $border-light;
  font-weight: 500;
}

.card-body {
  padding: $spacing-lg;
}

.card-footer {
  padding: $spacing-lg;
  border-top: 1rpx solid $border-light;
  background-color: $bg-secondary;
}

/* ====== 表单组件 ====== */
.form-item {
  margin-bottom: $spacing-lg;
}

.form-label {
  display: block;
  margin-bottom: $spacing-sm;
  font-weight: 500;
  color: $text-primary;
}

.input {
  width: 100%;
  padding: $spacing-md;
  border: 2rpx solid $border-color;
  border-radius: $border-radius-base;
  font-size: $font-size-base;
  background-color: $white;
  transition: $transition-base;
  
  &:focus {
    border-color: $primary-color;
    box-shadow: 0 0 0 4rpx rgba(24, 144, 255, 0.1);
    outline: none;
  }
  
  &::placeholder {
    color: $text-placeholder;
  }
}

.input-error {
  border-color: $error-color;
  
  &:focus {
    border-color: $error-color;
    box-shadow: 0 0 0 4rpx rgba(255, 77, 79, 0.1);
  }
}

.textarea {
  resize: vertical;
  min-height: 120rpx;
}

/* ====== 标签组件 ====== */
.tag {
  display: inline-flex;
  align-items: center;
  padding: $spacing-xs $spacing-sm;
  border-radius: $border-radius-sm;
  font-size: $font-size-sm;
  font-weight: 500;
  border: 1rpx solid transparent;
}

.tag-primary {
  background-color: rgba(24, 144, 255, 0.1);
  color: $primary-color;
  border-color: rgba(24, 144, 255, 0.2);
}

.tag-success {
  background-color: rgba(82, 196, 26, 0.1);
  color: $success-color;
  border-color: rgba(82, 196, 26, 0.2);
}

.tag-warning {
  background-color: rgba(250, 173, 20, 0.1);
  color: $warning-color;
  border-color: rgba(250, 173, 20, 0.2);
}

.tag-error {
  background-color: rgba(255, 77, 79, 0.1);
  color: $error-color;
  border-color: rgba(255, 77, 79, 0.2);
}

/* ====== 状态指示器 ====== */
.status-dot {
  display: inline-block;
  width: 16rpx;
  height: 16rpx;
  border-radius: 50%;
  margin-right: $spacing-sm;
}

.status-success {
  background-color: $success-color;
}

.status-warning {
  background-color: $warning-color;
}

.status-error {
  background-color: $error-color;
}

.status-processing {
  background-color: $primary-color;
}

/* ====== 分割线 ====== */
.divider {
  height: 1rpx;
  background-color: $border-light;
  margin: $spacing-lg 0;
}

.divider-vertical {
  width: 1rpx;
  height: 100%;
  background-color: $border-light;
  margin: 0 $spacing-lg;
}

/* ====== 加载状态 ====== */
.loading {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: $spacing-xl;
  color: $text-secondary;
}

.empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: $spacing-xxl;
  color: $text-secondary;
  
  .empty-icon {
    font-size: 120rpx;
    margin-bottom: $spacing-lg;
    opacity: 0.3;
  }
  
  .empty-text {
    font-size: $font-size-lg;
  }
}

/* ====== 头像组件 ====== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  overflow: hidden;
  background-color: $gray-200;
  
  &-sm {
    width: 64rpx;
    height: 64rpx;
  }
  
  &-md {
    width: 80rpx;
    height: 80rpx;
  }
  
  &-lg {
    width: 120rpx;
    height: 120rpx;
  }
  
  &-xl {
    width: 160rpx;
    height: 160rpx;
  }
}